<template lang="html">
	 <div id="app">
    <!--<img src="./assets/logo.png">-->
	<div class="todo">
		todo
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">ToList({{todos.length}})</h3>
			</div>
			<div class="panel-body">
				<ul class="list-group">
					<li :class="{done:item.completed}" v-for="(item,index) in todos" class="list-group-item">
						{{item.title}}{{item.completed}}
					<button :class="item.completed?'btn-danger':'btn-success'" class="btn pull-right btn-xs" @click='toggleState(index)'>{{item.completed?'已完成':'完成'}}</button>
					<!--:class动态给class类名复制 第一个值是要赋的类名，第二个值如果是true则加上类名。--> 
					      <!--也可以是三元表达式-->
					      <button class="btn btn-info btn-xs pull-right" @click="deleteItem(index)">删除</button>
					</li>
				</ul>
				<input type="text" class="form-control" v-model="newData.title" name="" id=""/>
				<button @click="addNews( newData)" class="btn btn-success">添加</button>
			</div>
			<div class="panel-footer">

			</div>
		</div>
	</div>
	 <router-view></router-view>
  </div>
</template>

<script>
	export default {
//		el: '#app',
				data () {
					return{
				newData:{
						id:null,
						title:'',
						completed:false
						},
					todos:[{
							id: 1,
							title: '好好学习',
							completed:false
						},
						{
							id: 2,
							title: '天天向上',
							completed:false
						},
						{
							id: 3,
							title: '赠人玫瑰',
							completed:false
						},
						{
							id: 4,
							title: '好好学习',
							completed:false
						},
						{
							id: 5,
							title: '手有余香',
							completed:false
						}
					]
					}
				},
				methods:{
				addNews(data){
						this.todos.push(data);
						this.newData = {
							id:null,
							title:'',
							completed:false	//代表按钮的状态
						};
				},
				toggleState(index){
					this.todos[index].completed=!this.todos[index].completed;
					console.log(index);
				},
				deleteItem(index){
					this.todos.splice(index,1);
				}
				},
					computed:{
						total(){	//计算属性
							return this.todos.length;
						}
					}
	}

	
				

</script>

<style lang="css">
	.done{
				color:green;
				text-decoration: line-through;
			}
</style>